<template>
    <div class="basicWrapper">
        <el-row :gutter="20">
            <el-col :span="12">
                <h2 class="formH2">修改绑定邮箱</h2>
                <span @click="handleBack()" class="handleBack">返回基本信息</span>
                <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm"
                    v-loading="loading">
                    <el-form-item label="当前邮箱" prop="oldEmail" v-if="form.oldEmail !== ''">
                        <el-input disabled v-model="form.oldEmail"></el-input>
                    </el-form-item>
                    <el-form-item label="新邮箱" prop="email">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱验证码" prop="emailCode" class="emailForm">
                        <el-input class="emailLeft" v-model="form.emailCode" placeholder="请输入验证码"></el-input>
                        <el-button :disabled="disabled" @click="logInCode" class="codeBtn" type="primary" plain>{{
                            btnTxt
                        }}</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="success" @click="submitForm()">立即绑定</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getUserInfo2, changeEmail } from "@/request/api/user"
import {sendEmail3} from "@/request/api/login"
export default {
    data() {
        return {
            form: {
                oldEmail: '',//旧邮箱
                email: '',//邮箱
                emailCode: '',//邮箱验证码
            },
            rules: {
                email: [
                    { required: true, message: '请输入新邮箱', trigger: 'blur' },
                ],
                emailCode: [
                    { required: true, message: '请输入新邮箱验证码', trigger: 'blur' },
                ],
            },
            loading: true,
            btnTxt: "获取验证码",//
            disabled: false,//是否可选
            time: 60,//倒计时开始时间
        }
    },
    created() {
        this.getInfo()
    },
    methods: {
        // 获取用户信息
        getInfo() {
            getUserInfo2().then(res => {
                if (res.data.code === 200) {
                    this.loading = false
                    this.form.oldEmail = res.data.result.email
                }
                this.loading = false
            })
        },
        // 返回
        handleBack() {
            this.$emit('handleBackc')

            // this.$router.push("/basicInfo");
        },
        submitForm() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    delete this.form.oldPhone
                    changeEmail(this.form).then((res) => {
                        if (res.data.code == 200) {
                            this.$message({
                                message: "修改邮箱成功！",
                                type: "success",
                            });
                            setTimeout(() => {
                                // this.$router.push("/basicInfo");
            this.$emit('handleBack')

                            }, 1200);
                        } else {
                            this.$message.error(res.data.message);
                        }
                    });
                } else {
                    return false;
                }
            });
        },
        //发送手机验证码倒计时-邮箱
        timer() {
            if (this.time > 0) {
                this.disabled = true;
                this.time--;
                this.btnTxt = this.time + "秒";
                setTimeout(this.timer, 1000);
            } else {
                this.time = 0;
                this.btnTxt = "获取验证码";
                this.disabled = false;
            }
        },
        // 发送手机验证码-邮箱
        getSendEmail(email) {
            let params = {
                email
            }
            sendEmail3(params).then((res) => {
                if (res.data.code === 200) {
                    this.$notify({
                        title: "成功",
                        message: res.data.message,
                        type: "success",
                    });
                    this.time = 60;
                    this.timer();
                } else {
                    this.$notify({
                        title: "错误",
                        message: res.data.message,
                        type: "error",
                    });
                }
            });
        },
        // 点击获取验证码-邮箱
        logInCode() {
            if (this.form.email === "") {
                this.$message({
                    message: "请输入邮箱！",
                    type: "warning",
                });
                return false;
            }
            this.getSendEmail(this.form.email);
        },
    }
}
</script>
<style lang="less" scoped>
@import "./basicInfo.less";

/deep/.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 120px;
    height: 120px;
    display: block;
}

.uploadTip {
    color: #666;
    font-size: 14px;
    margin-top: 20px;
}

.uploadTitle {
    font-size: 16px;
    color: #606266;
}

.formRight {
    text-align: center;
    padding-top: 100px;
}

.demo-ruleForm {
    margin-top: 20px;
}
.emailLeft{
    width:340px;
  }
  .codeBtn{
    margin-left:10px;
    width:112px;
  }
  .emailForm{
    width:570px;
  }
</style>

